<template>
	<view class="me-address-add-container">
		<view class="me-address-add-input-item">
			<view class="me-address-add-text">收货人</view><input placeholder="名字" type="text" class="me-address-add-input" v-model.trim="data.addressInfo.name"/>
		</view>
		<view class="me-address-add-input-item">
			<view class="me-address-add-text">联系电话</view><input type="text" placeholder="手机号码" class="me-address-add-input" v-model.trim="data.addressInfo.phone"/>
		</view>
		<view class="me-address-add-input-item">
			<view class="me-address-add-text">所在地区</view>
			<view class="me-address-add-district">
				<picker mode="region" @change="chooseregion">
					<input class="uni-input" v-model.trim="data.addressInfo.area" disabled placeholder="请选择所在地区"/>
				</picker>
			</view>
		</view>
		<view class="me-address-add-input-item1">
			<view class="me-address-add-text1">详细地址</view><textarea class="me-address-add-textarea" placeholder="详细地址" v-model.trim="data.addressInfo.detail"></textarea>
		</view>
	</view>
	<button class="me-address-add-btn" @tap="addAddress">添 加</button>
</template>

<script>
	import {reactive} from 'vue'
	// import AddressPicker from '@/components/me/address-picker'
	import global from '../../config/global.js'
	export default {
		name:'me-address-add',
		components:{
			// AddressPicker
		},
		setup(){
			let data = reactive({
				addressInfo:{
					name:'',
					phone:'',
					area:'',
					detail:''
				}
			})
			
			function chooseregion(event){
				// console.log(event.detail.value);
				data.addressInfo.area = event.detail.value.join(' - ')
			}
			
			function addAddress(){
				console.log(data.addressInfo)
				if(!data.addressInfo.name||!data.addressInfo.phone||!data.addressInfo.area||!data.addressInfo.detail){
					uni.showModal({
						title:'添加失败',
						content:'有内容为空',
						showCancel:false
					})
				}else{
					uni.request({
						url:global.BASE_URL+'/user/addaddress',
						method:"POST",
						data:{
							name:data.addressInfo.name,
							address:data.addressInfo.detail,
							phone:data.addressInfo.phone,
							area:data.addressInfo.area
						},
						header:{
							"mytoken":uni.getStorageSync("localtoken")
						},
						success:(res)=>{
							if(res.data.code){
								uni.showToast({
									icon:"success",
									title:"成功添加",
									duration: 500,
									success: () => {
										uni.navigateBack()
									}
								})
							}else{
								uni.showModal({
									title:'添加失败',
									content:res.data.msg,
									showCancel:false
								})
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
			}
			
			return{
				data,
				chooseregion,
				addAddress
			}
		}
	}
</script>

<style scoped>
	.me-address-add-container{
		width: 700rpx;
		margin: 20rpx 25rpx;
	}
	
	.me-address-add-input-item{
		position: relative;
		width: 650rpx;
		margin: 0rpx 25rpx;
		display: flex;
		padding: 20rpx 0;
		/* border-bottom: 2rpx solid #cdcdcd; */
		height: fit-content;
		align-items: center;
		
	}
	
	.me-address-add-input-item1{
		position: relative;
		width: 650rpx;
		margin: 0rpx 25rpx;
		display: flex;
		padding: 20rpx 0;
		/* border-bottom: 2rpx solid #cdcdcd; */
		height: fit-content;
		
	}
	
	.me-address-add-text{
		font-size: 33rpx;
		font-weight: bold;
		color: #515151;
		height: 50rpx;
		line-height: 50rpx;
		width: 150rpx;
		margin: 0rpx 5rpx;
		text-align-last: justify;
		text-align: justify;
		text-justify: distribute-all-lines;
	}
	
	.me-address-add-text1{
		font-size: 33rpx;
		font-weight: bold;
		color: #515151;
		height: 50rpx;
		line-height: 50rpx;
		width: 150rpx;
		margin: 0rpx 5rpx;
		text-align-last: justify;
		text-align: justify;
		text-justify: distribute-all-lines;
		/* align-items: top; */
	}
	
	.me-address-add-input{
		font-size: 28rpx;
		color: #515151;
		text-align: left;
		min-height: 50rpx;
		line-height: 50rpx;
		padding: 10rpx 15rpx;
		width: 420rpx;
		margin: 0rpx 5rpx;
		margin-left: 35rpx;
		/* border: 4rpx solid #515151; */
		background-color: #eeeeee;
		border-radius: 20rpx;
	}
	
	.me-address-add-textarea{
		font-size: 28rpx;
		color: #515151;
		text-align: left;
		height: 150rpx;
		line-height: 50rpx;
		padding: 10rpx 15rpx;
		width: 420rpx;
		margin: 0rpx 5rpx;
		margin-left: 35rpx;
		/* border: 4rpx solid #515151; */
		background-color: #eeeeee;
		border-radius: 20rpx;
	}
	
	.me-address-add-district{
		font-size: 28rpx;
		color: #515151;
		text-align: left;
		min-height: 50rpx;
		line-height: 50rpx;
		padding: 10rpx 15rpx;
		width: 420rpx;
		margin: 0rpx 5rpx;
		margin-left: 35rpx;
	}
	
	.me-address-add-btn{
		width: 400rpx;
		margin: 20rpx 175rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #98CDD2;
		color: white;
		font-size: 35rpx;
		border-radius: 20rpx;
		margin-top: 80rpx;
	}
</style>
